<template>
  <div class="app-container" v-loading="loading">
    <el-form :inline="true" :model="queryParams">
      <div style="display: flex; flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.receiptCode"
              placeholder="入库通知单号"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
              clearable
              placeholder="状态"
              style="width: 100%"
              v-model="queryParams.status"
            >
              <template v-for="(item, index) in receipt_status" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.purchaseCode"
              placeholder="关联采购单号"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
              clearable
              placeholder="订单类型"
              style="width: 100%"
              v-model="queryParams.receiptType"
            >
              <template v-for="(item, index) in receipt_type" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.vendorName"
              placeholder="供应商"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.createByName"
              placeholder="创建人"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              style="width: 100%"
              v-model="timeData"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              range-separator="-"
              type="datetimerange"
              value-format="YYYY-MM-DD HH:mm:ss"
              unlink-panels
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList"
              >查询</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>
    </el-form>
    <div>
      <el-button
        type="primary"
        @click="clickReceiving"
        v-hasPermi="['storage:b2b:receipt']"
        >收货</el-button
      >
      <el-button type="primary">导出</el-button>
      <el-button type="primary" @click="printGoodsTag"
        >打印商品库标签</el-button
      >
    </div>
    <vxe-table
      ref="tableRef"
      border
      style="margin-top: 10px"
      align="center"
      :data="tableList"
      :height="tableHeight"
      :radio-config="{ trigger: 'row' }"
      :row-config="{ isCurrent: true, isHover: true }"
    >
      <vxe-column type="radio" width="60"></vxe-column>
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="receiptCode" width="220" title="入库单号"></vxe-column>
      <vxe-column field="status" width="150" title="状态">
        <template v-slot="{ row }">
          {{ returnDictLabel(receipt_status, row.status) }}
        </template>
      </vxe-column>
      <vxe-column field="totalNum" width="100" title="应收货数量"></vxe-column>
      <vxe-column field="receiptNum" width="100" title="实收数量"></vxe-column>
      <vxe-column
        field="qcPassNum"
        width="120"
        title="质量正品数量"
      ></vxe-column>
      <vxe-column
        field="purchaseCode"
        width="200"
        title="采购订单号"
      ></vxe-column>
      <vxe-column field="receiptType" width="150" title="订单类型">
        <template v-slot="{ row }">
          {{ returnDictLabel(receipt_type, row.receiptType) }}
        </template>
      </vxe-column>
      <vxe-column field="companyName" width="150" title="公司名称"></vxe-column>
      <vxe-column
        field="warehouseName"
        width="150"
        title="入库仓库"
      ></vxe-column>
      <vxe-column
        field="vendorCode"
        width="150"
        title="供应商编码"
      ></vxe-column>
      <vxe-column field="vendorName" width="150" title="供应商"></vxe-column>
      <vxe-column field="remark" width="200" title="备注"></vxe-column>
      <vxe-column field="createByName" width="150" title="创建人"></vxe-column>
      <vxe-column field="createTime" width="180" title="创建时间"></vxe-column>
    </vxe-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <!--     收货-->
    <B2bReceivingDialog
      v-if="isShowDialog"
      :isShowDialog="isShowDialog"
      :rowData="rowData"
      @cancel="handleClose"
    ></B2bReceivingDialog>

    <!--    打印区域-->
    <!-- <OfflineReceivePrint
      :isShowDialog="isShowPrint"
      v-if="isShowPrint"
      :detailData="printDataList"
      @cancel="closePrint"
    ></OfflineReceivePrint> -->
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from "vue";
import B2bReceivingDialog from "@/views/inStorage/offlineReceiveGoods/component/b2bReceivingDialog.vue";
import { getReceiptQcB2bReceiptList, printSkuLabel } from "@/api/scApi";
import OfflineReceivePrint from "@/views/inStorage/offlineReceiveGoods/offlineReceivePrint.vue";
import StoragePrint from "@/views/basicData/storageLocationManagement/storagePrint.vue";

const { proxy } = getCurrentInstance();

const { receipt_status, receipt_type } = proxy.useDict(
  "receipt_status",
  "receipt_type"
);

let timeData = ref([]);
let queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
let tableList = ref([]);
let tableHeight = ref(0);
let total = ref(0);
let loading = ref(false);
let printDataList = ref([]);
let isShowPrint = ref(false);
nextTick(() => {
  tableHeight.value = window.innerHeight - 350;
});
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 350;
};

let isShowDialog = ref(false);
let rowData = ref({}); //选择行的数据
function clickReceiving() {
  rowData.value = proxy.$refs.tableRef.getRadioRecord();
  if (rowData.value) {
    if (rowData.value.status === 0) {
      isShowDialog.value = true;
    } else {
      proxy.$modal.msgWarning("只能对待收货进行收货!");
    }
  } else {
    proxy.$modal.msgWarning("请先选择一行数据!");
  }
}

function getList() {
  loading.value = true;
  queryParams.value.startTime = timeData.value[0];
  queryParams.value.endTime = timeData.value[1];
  let params = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value,
  };
  getReceiptQcB2bReceiptList(params)
    .then((res) => {
      loading.value = false;
      tableList.value = res.data;
      total.value = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

function resetQuery() {
  timeData.value = [];
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  };
  getList();
}

onMounted(() => {
  getList();
});

function handleClose(isReload, data) {
  rowData.value = {};
  isShowDialog.value = false;
  if (isReload) {
    getList();
  }
  // if(data &&data.length>0){
  //   printDataList.value =data
  //   isShowPrint.value=true
  // }
}

//打印商品库标签
function printGoodsTag() {
  let selRow = proxy.$refs.tableRef.getCurrentRecord();
  if (!selRow) {
    proxy.$modal.msgWarning("请先选择要打印的数据!");
  } else if (selRow.status === 0) {
    proxy.$modal.msgWarning("只能打印已入库的数据!");
  } else {
    printSkuLabel({ receiptId: selRow.receiptId }).then((res) => {
      if (res.code === 200) {
        isShowPrint.value = true;
        printDataList.value = res.data;
      }
    });
  }
}
function closePrint() {
  printDataList.value = {};
  isShowPrint.value = false;
}
</script>

<style scoped lang="scss">
.el-form-item {
  width: 90%;
}
</style>
